<template>
    <view class="category">
        <template v-if="page.type === 1">
            <one class="container"></one>
        </template>
        <template v-if="page.type === 2">
            <two v-if="webType && webType===0" class="container"></two>
			<meal v-if="webType && webType===1" class="container"></meal>
			<jiaz v-if="webType && webType===2" class="container"></jiaz>
        </template>
        <template v-if="page.type === 3">
            <three class="container"></three>
        </template>
        <template v-if="page.type === 4">
            <four class="container"></four>
        </template>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import One from './one.vue'
import Two from './two.vue'
import Jiaz from './jiaz.vue'
import Meal from './meal.vue'
import Three from './three.vue'
import Four from './four.vue'
import { useDataEffect } from './useDataEffect'
import { useAppStore } from '@/stores/app'

// 延迟初始化 store，避免在 Pinia 未完全初始化时调用
let appStore: ReturnType<typeof useAppStore> | null = null
const webType = ref<any>(null)

// 在 onMounted 中初始化 store，确保 Pinia 已完全初始化
onMounted(() => {
    appStore = useAppStore()
    if (appStore) {
        webType.value = appStore.getWebType
    }
})

const { page } = useDataEffect()
</script>

<style>
.container {
    height: calc(100vh - 300rpx);
}
</style>
